<template>
  <div>
    <h1>Home</h1>
    <p>当前用户：{{ userStore.name }}</p>
    <p>当前用户年纪：{{ userStore.age }}</p>
    <p>当前计数：{{ count }}</p>
    <button @click="count++">增加计数</button>
    <q-separator />
    <div class="media-picker-test">
      <h3>媒体选择器测试</h3>
      <div class="test-buttons">
        <q-btn
          color="primary"
          @click="showMediaPicker"
          >组件方式调用</q-btn
        >
        <q-btn
          color="secondary"
          @click="showMediaPickerByHook"
          >Hook方式调用</q-btn
        >
      </div>
      <div v-if="lastResult" class="result-display">
        <h4>最后选择结果：</h4>
        <pre>{{ JSON.stringify(lastResult, null, 2) }}</pre>
      </div>
      <div v-if="lastError" class="error-display">
        <h4>最后错误：</h4>
        <pre>{{ lastError }}</pre>
      </div>
    </div>
    <MediaPicker
      ref="mediaPickerRef"
      :resolve="onResolveRef"
      :reject="onRejectRef"
    />
    <hr />
    <DoubleClickEdit :text="text" @update:text="onUpdateText" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useUserStore } from "@/store/user";
import DoubleClickEdit from "@/components/DoubleClickEdit.vue";
import MediaPicker from "@/views/media-picker/index.vue";
import { useMenu } from "../../hooks/useMenu.ts";

const userStore = useUserStore();

const count = ref(0);

const text = ref("双击编辑");

const onUpdateText = (newText: string) => {
  text.value = newText;
};

// 测试结果显示
const lastResult = ref<any>(null);
const lastError = ref<string>("");

const mediaPickerRef = ref<typeof MediaPicker>();

// 组件方式的回调函数
const onResolveRef = (result: any) => {
  console.log("组件方式 - 选择结果:", result);
  lastResult.value = result;
  lastError.value = "";
};

const onRejectRef = (error: any) => {
  console.log("组件方式 - 取消选择:", error);
  lastResult.value = null;
  lastError.value = error?.message || "用户取消选择";
};

const showMediaPicker = () => {
  mediaPickerRef.value?.show();
};

// hooks
const { selectMedia } = useMenu();

const showMediaPickerByHook = async () => {
  try {
    const result = await selectMedia("456", "video");
    console.log("Hook方式 - 选择结果:", result);
    lastResult.value = result;
    lastError.value = "";
  } catch (error: any) {
    console.log("Hook方式 - 取消选择:", error);
    lastResult.value = null;
    lastError.value = error?.message || "用户取消选择";
  }
};
</script>

<style scoped>
.media-picker-test {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.test-buttons {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.result-display {
  margin-top: 16px;
  padding: 12px;
  background-color: #e8f5e8;
  border-radius: 4px;
  border-left: 4px solid #4caf50;
}

.error-display {
  margin-top: 16px;
  padding: 12px;
  background-color: #ffeaea;
  border-radius: 4px;
  border-left: 4px solid #f44336;
}

.result-display pre,
.error-display pre {
  margin: 8px 0 0 0;
  font-size: 14px;
  white-space: pre-wrap;
}
</style>
